<template>
	<view>
		<!-- {'margin-top': (basicsWidth / 3) + 'rpx',} -->
		<view class="image-list" :class="['image-list-'+ imageList.length,{'isPadLeft':isPadLeft}]"
			v-if="imageList.length > 0 && imageList[0].fileType == 1"
			:style="'height:' + boxHight + ';' + 'width:' +  basicsWidth + 'rpx;'">
			<view class="image-warps" v-for="(item,index) in imageList" :key="item.id"
				:class="'image-warps-'+ (index + 1)"
				:style="[imageMarginTop(index,{'--basics-width': basicsWidth + 'rpx','--basics-width-px': basicsWidthPx ,'height':imageHeight(index),'width': imageWidth(index)})]">
				<uv-image @tap="previewImg(imageList, index)" :src="item.fileUrl + '?imageView2/3/w/500/h/500'" :lazyLoad="true"
					:observeLazyLoad="true" width="100%" height="100%"
					:radius="imageRadius(index)"></uv-image>
			</view>
		</view>
		<!-- 		<view class="image-list" :class="[{'isPadLeft':isPadLeft}]"
			v-if="imageList.length > 0 && imageList[0].fileType == 2">
			<cover-view class="image-warps">
				<video :style="{'width': imageList[0].width + 'px','height': imageList[0].height + 'px'}" class="video"
					:controls="false" :src="imageList[0].fileUrl" id="video-full" autoplay loop muted></video>
			</cover-view>
		</view> -->

		<view class="image-list" :class="['image-list-'+ imageList.length,{'isPadLeft':isPadLeft}]"
			v-if="imageList.length > 0 && imageList[0].fileType == 2">
			<view class="image-warps" v-for="(item,index) in imageList" :key="item.id"
				:class="'image-warps-'+ (index + 1)"
				:style="{'--basics-width': basicsWidth + 'px','--basics-width-f': (-basicsWidth) + 'px'}">
				<uv-image @tap="previewImg(imageList, index)" :src="item.coverPictureUrl" :lazyLoad="true"
					:observeLazyLoad="true" :width="imageWidth(index)" :height="imageHeight(index)"
					:radius="imageRadius(index)"></uv-image>
				<view class="status_type"
					:style="'width:' +imageWidth(index) + ';'+'height:' + imageHeight(index) + ';'"
					@tap="onPreviewVideo(item,index)">
					<image class="play" mode="widthFix"
						src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/play.png">
					</image>
				</view>
			</view>
		</view>
		<uv-preview-video ref="previewVideo"></uv-preview-video>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {};
		},
		options: {},
		props: {
			imageList: {
				type: Array,
				default () {
					return []
				}
			},
			basicsWidthPx: {
				type: [String, Number],
				default: 0
			},
			basicsWidth: {
				type: [String, Number],
				default: 0
			},
			isPadLeft: {
				type: Boolean,
				default: true
			},
			from: {
				type: [String, Number],
				default: ''
			},
		},
		created() {},
		computed: {
			boxHight() {
				switch (this.imageList.length) {
					case 1:
						return this.basicsWidth + 'rpx'
					case 2:
						return this.basicsWidth / 2 + 'rpx'
					case 3:
						return this.basicsWidth / 3 * 2 + 6 + 'rpx'
					case 4:
						return this.basicsWidth + 6 + 'rpx'
					case 5:
						return this.basicsWidth + 6 + 'rpx'
					case 6:
						return this.basicsWidth / 3 * 2 + 6 + 'rpx'
					case 7:
						return this.basicsWidth + 12 + 'rpx'
					case 8:
						return this.basicsWidth + 12 + 'rpx'
					case 9:
						return this.basicsWidth + 'rpx'
				}
			},
			imageWidth() {
				return function(index) {
					switch (this.imageList.length) {
						case 1:
							return this.basicsWidth + 'rpx'
						case 2:
						case 4:
							return (this.basicsWidth - 6) / 2 + 'rpx'
						case 3:
							if (index == 0)
								return this.basicsWidth / 3 * 2 - 6 + 'rpx'
							return this.basicsWidth / 3 + 'rpx'
						case 5:
							if (index == 0)
								return (this.basicsWidth) / 3 * 2 - 6 + 'rpx'
							if (index == 3)
								return (this.basicsWidth) / 3 * 2 - 6 + 'rpx'
							return (this.basicsWidth) / 3 + 'rpx'
						case 6:
							return this.basicsWidth / 3 - 6 + 'rpx'
						case 7:
							if (index == 0 || index == 1 || index == 4 || index == 5)
								return (this.basicsWidth) / 3 - 4 + 'rpx'
							return (this.basicsWidth) / 3 - 4 + 'rpx'
						case 8:
							if (index == 0 || index == 1 || index == 3 || index == 4 || index == 5 || index == 6)
								return (this.basicsWidth) / 3 - 4 + 'rpx'
							return this.basicsWidth / 3 - 4 + 'rpx'
						case 9:
							return (this.basicsWidth - 12) / 3 + 'rpx'
					}
				}
			},
			imageHeight() {
				return function(index) {
					switch (this.imageList.length) {
						case 1:
							return this.basicsWidth + 'rpx'
						case 2:
						case 4:
							return this.basicsWidth / 2 + 'rpx'
						case 3:
							if (index == 0)
								return this.basicsWidth / 3 * 2 + 'rpx'
							return this.basicsWidth / 3 - 3 + 'rpx'
						case 5:
							if (index == 0)
								return this.basicsWidth / 2 + 3 + 'rpx'
							if (index == 3)
								return this.basicsWidth / 2 + 3 + 'rpx'
							return this.basicsWidth / 3 + 'rpx'
						case 6:
							return this.basicsWidth / 3 + 'rpx'
						case 7:
							if (index == 0 || index == 1 || index == 4 || index == 5)
								return this.basicsWidth / 2 + 'rpx'
							return this.basicsWidth / 3 - 2 + 'rpx'
						case 8:
							if (index == 2)
								return this.basicsWidth / 3 * 2 + 6 + 'rpx'
							return this.basicsWidth / 3 + 'rpx'
						case 9:
							return (this.basicsWidth - 12) / 3 + 'rpx'
					}
				}
			},
			imageRadius() {
				return function(index) {
					switch (this.imageList.length) {
						case 1:
							return '20'
						case 2:
							if (index == 0)
								return '20rpx 0rpx 0rpx 20rpx'
							if (index == 1)
								return '0rpx 20rpx 20rpx 0rpx'
						case 3:
							if (index == 0)
								return '20rpx 0rpx 0rpx 20rpx'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 4:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 2)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 5:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 2)
								return '0'
							if (index == 3)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 6:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 4)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 3)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 7:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 5 || index == 3)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 4)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 8:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 3 || index == 4 || index == 6)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 5)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 9:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 6)
								return '0rpx 0rpx 0rpx 20rpx'
							if (index == 8)
								return '0rpx 0rpx 20rpx 0rpx'
							return '0'
					}
				}
			},
			imageMarginTop() {
				return function(index, style) {
					switch (this.imageList.length) {
						case 1:
							return style
						case 2:
						case 4:
							return style
						case 3:
							return style
						case 5:
							if (index == 3)
								return Object.assign(style, {
									'margin-top': (-this.basicsWidth / 6) + 'rpx'
								})
							return style
						case 6:
							return style
						case 7:
							if (index == 4 || index == 5)
								return Object.assign(style, {
									'margin-top': (-this.basicsWidth / 6) + 'rpx'
								})
							return style
						case 8:
							if (index == 3 || index == 4)
								return Object.assign(style, {
									'margin-top': (-this.basicsWidth / 3 - 6) + 'rpx'
								})
							return style
						case 9:
							return style
					}
				}
			},
		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			onPreviewVideo(item) {
				if (this.from != 'index') {
					this.$refs.previewVideo.open(item.fileUrl);
				} else {
					this.$emit('clickVideo', item)
				}
			},
			previewImg(img, index) {
				// 预览图片
				let imageUrl = []
				img.forEach((item) => {
					imageUrl.push(item.fileUrl)
				})
				uni.previewImage({
					current: index,
					urls: imageUrl,
				})
			},
			navigationTo: function(url, type) {
				if (type) {
					return
				}
				app.navigationTo(url);
			}
		}
	};
</script>
<style lang="scss">
	.image-list {
		// box-sizing: border-box;

		.image-warps {
			position: relative;

			.status_type {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.2);

				.play {
					width: 20%;
				}
			}
		}

		&.isPadLeft {
			padding-left: 106rpx;
		}

		&.image-list-2 {
			display: flex;

			.image-warps-1 {
				margin-right: 6rpx;
			}

		}

		&.image-list-3 {

			// display: flex;
			.image-warps-1 {
				float: left;
			}

			.image-warps-2 {
				// float: right;
				float: left;
				margin-bottom: 6rpx;
				margin-left: 6rpx;
			}

			.image-warps-3 {
				// float: right;
				float: left;
				margin-left: 6rpx;
			}
		}

		&.image-list-4 {
			display: flex;
			flex-wrap: wrap;

			.image-warps-1,
			.image-warps-3 {
				margin-right: 6rpx;
			}

			.image-warps-1,
			.image-warps-2 {
				margin-bottom: 6rpx;
			}
		}

		&.image-list-5 {
			position: relative;

			.image-warps-1,
			.image-warps-4 {
				float: left;
			}

			.image-warps-1 {
				margin-bottom: 6rpx;
			}

			.image-warps-2,
			.image-warps-3,
			.image-warps-5 {
				// float: right;
				float: left;
				margin-left: 6rpx;
			}

			.image-warps-2,
			.image-warps-3 {
				margin-bottom: 6rpx;
			}

			.image-warps-4 {
				// margin-top: calc((var(--basics-width-px) / 6));
			}

		}

		&.image-list-6 {
			display: flex;
			flex-wrap: wrap;

			.image-warps-1,
			.image-warps-2,
			.image-warps-4,
			.image-warps-5 {
				margin-right: 6rpx;
			}

			.image-warps-1,
			.image-warps-2,
			.image-warps-3 {
				margin-bottom: 6rpx;
			}
		}

		&.image-list-7 {
			position: relative;

			.image-warps-3,
			.image-warps-4,
			.image-warps-7 {
				float: left;
				// margin-left: 6rpx;
				margin-bottom: 6rpx;
			}
			.image-warps-7 {
				margin-bottom: 0;
			}

			.image-warps-1,
			.image-warps-2,
			.image-warps-5,
			.image-warps-6 {
				float: left;
				margin-right: 6rpx;
			}


			.image-warps-5,
			.image-warps-6 {
				// margin-top: 6rpx;
				// margin-top: calc((var(--basics-width-px) / 6) - 2rpx);
			}

		}

		&.image-list-8 {
			display: flex;
			flex-wrap: wrap;

			.image-warps {
				// float: left;
			}

			.image-warps-1,
			.image-warps-2,
			.image-warps-4,
			.image-warps-5,
			.image-warps-6,
			.image-warps-7 {
				margin-right: 6rpx;
			}

			.image-warps-1,
			.image-warps-2,
			.image-warps-4,
			.image-warps-5 {
				margin-bottom: 6rpx;
			}

			.image-warps-4,
			.image-warps-5 {
				// margin-top: calc((var(--basics-width-px) / 3) - 6rpx);
			}

			.image-warps-3 {
				margin-bottom: 6rpx;
			}
		}

		&.image-list-9 {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;

			.image-warps-4,
			.image-warps-6 {
				margin: 6rpx 0;
			}

			.image-warps-2,
			.image-warps-8 {
				margin: 0 6rpx;
			}

			.image-warps-5 {
				margin: 6rpx;
			}
		}
	}
</style>